<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS_选择器</title>

	<style>
		/**补充:
			div本身是不占有文档流.它本身不显示的.它的高度是由内部元素来撑开的.
		*/


		/*标签选择器 */
		/*类选择器 一组元素*/
		.xian{border:1px solid red ; width: 200px;height: 200px;}
		/**ID选择器  具有唯一性 比如:logo*/
		#div1{background-color:blue; width: 200px; height: 200px; }
		/**组合选择器*/
		/*border-radius  边框的圆角   像素值是控制圆角的大小.*/
		.xian,#div1{border-radius: 10px;}

		/**后代选择器*/
		/*#div1 ul li {background-color: lightcyan;}*/
		/**子选择器**/
		/*#div1>ul li{background-color: lightcyan;}*/

        #div1 div ul li{background-color: lightcyan;}

		#ipt1{border:1px dotted red ;}
		#ipt1:focus{background-color: lightgray; }

		#span1:before{content:"How "}
		#span1:after{content:" you!!!"}

		/*必须是ul子元素是第一个元素是li的情况下才会修饰.*/
		#div1>ul li:first-child{color:yellow;}
		#div1>ul li:last-child{color:yellow;}
		/**通过自然数的计数.来直接确定指定的元素.*/
		#div1>ul li:nth-child(2){color:red;}

	</style>
</head>
<body>

	<!--CSS了解-->
	<input type="text" id="ipt1"><br>
	<span id="span1"> are </span>


	<!--<div class="xian"></div>-->
	<!-- 元素+选择器同时书写的方式:    div#div1    div.div1    -->
	<div id="div1">
		<!--(ul>li*3)+div>ul>li*3-->
		<ul>
			<span>ul_span</span>
			<li>ul_li1</li>
			<li>ul_li2</li>
			<li>ul_li3</li>

		</ul>
		<div>
			<ul>
				<li>div_ul_li1</li>
				<li>div_ul_li2</li>
				<li>div_ul_li3</li>
			</ul>
		</div>
	</div>



</body>
</html>